<%--
  Created by IntelliJ IDEA.
  User: ifut
  Date: 2020/7/29
  Time: 8:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - 注册</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link href="css/login.css?v=4.1.0" rel="stylesheet">
    <!-- <script>if(window.top !== window.self){ window.top.location = window.location;}</script> -->
</head>
<body class="gray-bg">
<div class="middle-box text-center loginscreen   animated fadeInDown">
    <div>
        <div>
            <!-- <h1 class="logo-name">H+</h1> -->
        </div>
        <h3>欢迎注册</h3>
        <p>创建一个新账户</p>
            <div class="form-group">
                <input id="username" type="text" class="form-control" placeholder="用户名" required="">
            </div>
            <div class="form-group">
                <input id="password" type="password" class="form-control" placeholder="密码" required="">
            </div>
            <div class="form-group">
                <select class="form-control">
                    <option value="0" style="color: #0088CC;">普通用户</option>
                    <option value="3"> 管理员</option>
                </select>
            </div>
            <div class="form-group">
                <input id="email" type="email" class="form-control" placeholder="邮箱" required="">
            </div>
            <div class="verify form-group clearfix">
                <div class="left fl">
                    <input id="verify" type="text" class="form-control" placeholder="输入验证码">
                </div>
                <div id="verifyid" class="right fr btn btn-primary" style="text-align: center; padding: 5px 0;">获取验证码</div>
            </div>
            <button id="register" type="submit" class="btn btn-primary block full-width m-b">注 册</button>
            <p class="text-muted text-center"><small>已经有账户了？</small><a href="login.jsp">点此登录</a>
            </p>
    </div>
</div>

<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<!-- iCheck -->
<script src="js/plugins/iCheck/icheck.min.js"></script>
<script>
    $(document).ready(function () {
        // $('.i-checks').iCheck({
        //     checkboxClass: 'icheckbox_square-green',
        //     radioClass: 'iradio_square-green',
        // });
        // 初始化获取验证码
        _initGetVerify();
        // 初始化注册事件
        _initRegister();
    });
    // 初始化获取验证码
    function _initGetVerify() {
        var $emailElem = $("#email");
        var isGetVerify = false;
        var timerid = null;
        // 倒计时秒数
        var countDown = 10;
        // email文本内容
        var emailText;
        $("#verifyid").click(function(){
            // 判断当前计时是否结束
            if(isGetVerify) {
                return;
            }
            emailText = $emailElem.val();
            var formData;
            formData = new FormData();
            formData.append('email',emailText);
            console.log(emailText);
            // 发送获取验证码请求
            $.ajax({
                type: "POST",
                url: "${pageContext.request.contextPath}/sendVailEmail",
                data:formData,
                dataType:'json',
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                processData: false,
                contentType: false,
                success: function(data){
                    console.log(data)
                },
                error:function(err){
                    alert("获取验证码失败")
                    console.log(err);
                }
            });
            // 设置当前按钮不可用
            if(!$(this).hasClass('disabled')) {
                $(this).addClass('disabled');
            }
            // 标记为以发送验证码
            isGetVerify = true
            // 清除定时器
            clearInterval(timerid);
            timerid = setInterval(() => {
                // 倒计时结束
                if(countDown <= 0) {
                    // 清除定时器
                    clearInterval(timerid);
                    $(this).text("获取验证码");
                    // 可以从新获取验证码
                    isGetVerify = false;
                    // 重置倒计时
                    countDown = 10;
                    // 设置当前按钮可用
                    if($(this).hasClass('disabled')) {
                        $(this).removeClass('disabled');
                    }
                    return;
                }
                // 时间秒数减一
                countDown--;
                $(this).text(countDown + "s");
            },1000)
        })
    }
    // 初始化注册事件
    function _initRegister() {
        var $usernameElem = $("#username");
        var $password = $("#password");
        var $verify = $("#verify");
        var $select = $("select");
        var $emailElem = $("#email");
        var username, password, verify, level, email;
        $("#register").click(function(){
            username = $usernameElem.val();
            password = $password.val();
            verify = $verify.val();
            level = $select.val();
            email = $emailElem.val();
            console.log(username,password,verify,email,level)
            var formData;
            formData = new FormData();
            formData.append('username',username);
            formData.append('password',password);
            formData.append('email',email);
            formData.append('code',verify);
            formData.append('level',level);
            // 发送注册请求
            $.ajax({
                type: "POST",
                url: "${pageContext.request.contextPath}/registered",
                data:formData,
                async: false,
                dataType:'json',
                processData: false,
                contentType: false,
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                success: function(data){
                    console.log(data)
                    if(data.code === 200) {
                        console.log("注册成功！")
                        window.frames.location.href="${pageContext.request.contextPath}/login.jsp"
                    } else {
                        alert("注册失败")
                    }
                },
                error:function(err){
                    alert(err)
                }
            });
        })
    }
</script>
</body>
</html>
